<template>
  <dark-mode-container
    ref="tableContainerRef"
    :class="{ 'p-18': isFullscreen }"
  >
    <n-space justify="space-between" align="center">
      <n-space align="center">
        <slot name="left-top"></slot>
      </n-space>
      <n-space align="center">
        <slot name="right-top"></slot>
        <n-tooltip>
          <template #trigger>
            <n-switch v-model:value="tableSetting.isStriped" />
          </template>
          表格斑马纹
        </n-tooltip>
        <n-divider vertical />
        <n-tooltip>
          <template #trigger>
            <refresh-icon :size="22" @click="getData" />
          </template>
          刷新
        </n-tooltip>
        <n-tooltip>
          <template #trigger>
            <n-icon size="21">
              <icon-gridicons-fullscreen v-if="!isFullscreen" @click="enter" />
              <icon-gridicons-fullscreen-exit v-else @click="exit" />
            </n-icon>
          </template>
          {{ isFullscreen ? "还原" : "全屏" }}
        </n-tooltip>
        <n-tooltip>
          <template #trigger>
            <div>
              <n-dropdown
                trigger="click"
                v-model:value="tableSetting.size"
                :options="tableSizeOptions"
                @select="(key) => (tableSetting.size = key)"
              >
                <div>
                  <icon-ant-design-column-height-outlined text-22 />
                </div>
              </n-dropdown>
            </div>
          </template>
          密度
        </n-tooltip>

        <column-setting
          v-model:table-columns="tableColumns"
          v-model:alive-columns="aliveColumns"
          :alive-columns-origin="allColumnsKey"
          @reset="resetSetting"
        />
      </n-space>
    </n-space>

    <div my-20></div>

    <data-table
      ref="dataTableRef"
      :request="request"
      :checked-row-keys="checkedKeys"
      :columns="tableColumns.filter((col) => aliveColumns.includes(col.key))"
      :remote="remote"
      :pagination="pagination"
      :single-line="singleLine"
      :size="tableSetting.size"
      :striped="tableSetting.isStriped"
      :row-key="rowKey"
      :max-height="isFullscreen ? 'calc(100vh - 180px)' : maxHeight"
      :min-height="minHeight"
      :scroll-x="scrollX || tableColumns.filter((col) => aliveColumns.includes(col.key)).reduce((pre, cur) => pre + (cur.width as number), 0)"
      @update:checked-row-keys="(keys: string[]) => emits('update:checkedKeys', keys)"
      @update:data="(data) => emits('update:data', data)"
    />
    <slot name="button"></slot>
  </dark-mode-container>
</template>

<script lang="ts" setup>
import { useCache } from "./hooks";
import type { FullTableProps, FullTableEmits } from "./types";
import ColumnSetting from "./components/column-setting.vue";
import { useFullscreen } from "@vueuse/core";

const props = defineProps<FullTableProps>();
const emits = defineEmits<FullTableEmits>();
const tableContainerRef = ref();
const dataTableRef = ref();
const tableSizeOptions = [
  { label: "紧凑", key: "small" },
  { label: "默认", key: "medium" },
  { label: "宽松", key: "large" },
];

const { isFullscreen, enter, exit } = useFullscreen(tableContainerRef);

const {
  tableColumns,
  aliveColumns,
  allColumnsKey,
  tableSetting,
  resetSetting,
} = useCache(props);

const getData = () => dataTableRef.value.getData();

defineExpose({ getData });
</script>
